<template>
	<el-container class="container">
		<el-aside class="aside" :width="asideWidth">
			<Nav />
		</el-aside>
		<el-container>
			<el-header class="head">
				<Header />
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
			<!-- <el-footer class="foot">版权所有 © 2024 wdb</el-footer> -->
		</el-container>
	</el-container>
</template>

<script setup lang="ts">
import Header from "@/components/Header/index.vue";
import Nav from "@/components/Nav/index.vue";
import { toRefs, computed } from "vue";
import { useMainStore } from "@/stores";
const store = useMainStore()
const { isCollapse } = toRefs(store)
const asideWidth = computed(() => {
	let width = 240;
	if (isCollapse.value) width = 64;
	return width + 'px'
})
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
